<template>
  <view class="work-report-page">
    <!-- 顶部统计卡片 -->
    <view class="stats-card">
      <view class="stats-header">
        <text class="stats-title">工作报告统计</text>
        <text class="stats-period">本月</text>
      </view>
      <view class="stats-grid">
        <view class="stat-item">
          <view class="stat-value">{{ reportStats.totalReports }}</view>
          <view class="stat-label">总报告数</view>
        </view>
        <view class="stat-item">
          <view class="stat-value">{{ reportStats.thisMonth }}</view>
          <view class="stat-label">本月报告</view>
        </view>
        <view class="stat-item">
          <view class="stat-value">{{ reportStats.pending }}</view>
          <view class="stat-label">待审核</view>
        </view>
        <view class="stat-item">
          <view class="stat-value">{{ reportStats.approved }}</view>
          <view class="stat-label">已通过</view>
        </view>
      </view>
    </view>

    <!-- 新建报告按钮 -->
    <view class="add-section">
      <button class="add-btn" @click="createNewReport">
        <view class="btn-content">
          <image src="/static/add-icon.png" class="add-icon" />
          <text class="btn-text">新建工作报告</text>
        </view>
      </button>
    </view>

    <!-- 筛选标签 -->
    <view class="filter-section">
      <view class="filter-tabs">
        <text 
          v-for="(tab, index) in filterTabs" 
          :key="index"
          :class="['filter-tab', currentFilter === index ? 'active' : '']"
          @click="setFilter(index)"
        >
          {{ tab }}
        </text>
      </view>
    </view>

    <!-- 报告列表 -->
    <view class="report-section">
      <view class="section-header">
        <text class="section-title">报告列表</text>
        <view class="sort-btn" @click="toggleSort">
          <text class="sort-text">{{ sortText }}</text>
          <image src="/static/arrow-down.png" class="sort-icon" />
        </view>
      </view>
      
      <view class="report-list">
        <view 
          class="report-item" 
          v-for="item in filteredReportList" 
          :key="item.id"
          @click="viewReport(item)"
        >
          <view class="item-left">
            <view class="report-title">{{ item.title }}</view>
            <view class="report-info">
              <text class="report-type">{{ item.type }}</text>
              <text class="report-date">{{ item.date }}</text>
            </view>
            <view class="report-summary">{{ item.summary }}</view>
          </view>
          <view class="item-right">
            <view class="status-badge" :class="item.statusClass">
              {{ item.status }}
            </view>
            <view class="report-time">{{ item.time }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="filteredReportList.length === 0" class="empty-state">
      <image src="/static/empty-report.png" class="empty-icon" />
      <text class="empty-text">暂无工作报告</text>
      <text class="empty-desc">点击上方按钮创建您的第一份工作报告</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 报告统计数据
const reportStats = ref({
  totalReports: 12,
  thisMonth: 3,
  pending: 1,
  approved: 11
})

// 筛选标签
const filterTabs = ref(['全部', '周报', '月报', '专项报告'])
const currentFilter = ref(0)

// 排序状态
const isDescending = ref(true)
const sortText = computed(() => isDescending.value ? '最新优先' : '最早优先')

// 报告列表
const reportList = ref([
  { 
    id: 1, 
    title: '5月工作总结报告', 
    type: '月报',
    date: '2024-05-31',
    time: '14:30',
    status: '已通过',
    statusClass: 'approved',
    summary: '本月完成设备维护15台，处理故障8起，客户满意度98%'
  },
  { 
    id: 2, 
    title: '第23周工作周报', 
    type: '周报',
    date: '2024-06-07',
    time: '16:45',
    status: '待审核',
    statusClass: 'pending',
    summary: '本周完成日常巡检20次，预防性维护3台设备'
  },
  { 
    id: 3, 
    title: '空调系统专项维护报告', 
    type: '专项报告',
    date: '2024-06-05',
    time: '10:20',
    status: '已通过',
    statusClass: 'approved',
    summary: '完成中央空调系统全面检修，更换滤网，清洗管道'
  },
  { 
    id: 4, 
    title: '第22周工作周报', 
    type: '周报',
    date: '2024-05-31',
    time: '17:15',
    status: '已通过',
    statusClass: 'approved',
    summary: '本周处理紧急故障2起，完成设备保养5台'
  },
  { 
    id: 5, 
    title: '电梯维护专项报告', 
    type: '专项报告',
    date: '2024-05-28',
    time: '09:30',
    status: '已通过',
    statusClass: 'approved',
    summary: '完成3部电梯年度检修，更换钢丝绳，调试安全装置'
  }
])

// 筛选报告列表
const filteredReportList = computed(() => {
  let filtered = reportList.value
  
  // 按类型筛选
  if (currentFilter.value > 0) {
    const typeMap = ['', '周报', '月报', '专项报告']
    filtered = filtered.filter(item => item.type === typeMap[currentFilter.value])
  }
  
  // 按时间排序
  filtered = [...filtered].sort((a, b) => {
    const dateA = new Date(a.date + ' ' + a.time)
    const dateB = new Date(b.date + ' ' + b.time)
    return isDescending.value ? dateB - dateA : dateA - dateB
  })
  
  return filtered
})

// 设置筛选
const setFilter = (index) => {
  currentFilter.value = index
}

// 切换排序
const toggleSort = () => {
  isDescending.value = !isDescending.value
}

// 创建新报告
const createNewReport = () => {
  uni.navigateTo({
    url: '/pages/user/workReport/create/create'
  })
}

// 查看报告详情
const viewReport = (item) => {
  uni.navigateTo({
    url: `/pages/user/workReport/detail/detail?id=${item.id}`
  })
}
</script>

<style scoped>
.work-report-page {
  min-height: 1200rpx;
  padding: 0 30rpx 240rpx 30rpx;
  background-color: #efefef;
}

.stats-card {
  margin-top: 30rpx;
  padding: 40rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20rpx;
  color: #ffffff;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.stats-title {
  font-size: 36rpx;
  font-weight: 600;
}

.stats-period {
  font-size: 28rpx;
  opacity: 0.9;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.stat-item {
  text-align: center;
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16rpx;
}

.stat-value {
  font-size: 48rpx;
  font-weight: 600;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 26rpx;
  opacity: 0.9;
}

.add-section {
  margin-top: 30rpx;
}

.add-btn {
  width: 100%;
  height: 100rpx;
  background: linear-gradient(135deg, #3D76FF 0%, #5B8CFF 100%);
  border-radius: 20rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(61, 118, 255, 0.3);
}

.btn-content {
  display: flex;
  align-items: center;
}

.add-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 16rpx;
}

.btn-text {
  font-size: 32rpx;
  color: #ffffff;
  font-weight: 600;
}

.filter-section {
  margin-top: 30rpx;
}

.filter-tabs {
  display: flex;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 8rpx;
}

.filter-tab {
  flex: 1;
  text-align: center;
  padding: 16rpx 24rpx;
  font-size: 28rpx;
  color: #666666;
  border-radius: 16rpx;
  transition: all 0.3s ease;
}

.filter-tab.active {
  background-color: #3D76FF;
  color: #ffffff;
}

.report-section {
  margin-top: 30rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.sort-btn {
  display: flex;
  align-items: center;
  padding: 12rpx 20rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}

.sort-text {
  font-size: 26rpx;
  color: #666666;
  margin-right: 8rpx;
}

.sort-icon {
  width: 24rpx;
  height: 24rpx;
}

.report-list {
  background-color: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
}

.report-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30rpx;
  border-bottom: 2rpx solid #f5f6fa;
  transition: background-color 0.3s ease;
}

.report-item:last-child {
  border-bottom: none;
}

.report-item:active {
  background-color: #f8f9fa;
}

.item-left {
  flex: 1;
  margin-right: 20rpx;
}

.report-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 16rpx;
  line-height: 1.4;
}

.report-info {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.report-type {
  font-size: 24rpx;
  color: #3D76FF;
  background-color: #f0f5ff;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  margin-right: 16rpx;
}

.report-date {
  font-size: 26rpx;
  color: #666666;
}

.report-summary {
  font-size: 26rpx;
  color: #999999;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.item-right {
  text-align: right;
  flex-shrink: 0;
}

.status-badge {
  display: inline-block;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  margin-bottom: 12rpx;
}

.status-badge.approved {
  background-color: #e8fff0;
  color: #52c41a;
}

.status-badge.pending {
  background-color: #fff7e6;
  color: #fa8c16;
}

.status-badge.rejected {
  background-color: #fff1f0;
  color: #f5222d;
}

.report-time {
  font-size: 24rpx;
  color: #999999;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;
  text-align: center;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 40rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 32rpx;
  color: #666666;
  margin-bottom: 16rpx;
}

.empty-desc {
  font-size: 26rpx;
  color: #999999;
  line-height: 1.5;
}
</style> 